<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>回访管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<button type="button" class="layui-btn" id="import">
    <i class="layui-icon">&#xe67c;</i>导入回访信息
</button>
<table id="visitTable" lay-filter="visitFilter"></table>
    <script src="/layui/layui.js"></script>
    <!--行编辑工具栏-->
    <script type="text/html" id="barRowEdit">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <!--头部编辑工具栏：-->
    <script type="text/html" id="toolbarHead">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
            <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
            <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
        </div>
    </script>

    <!--回访添加表单-->
    <form id="visitAddForm" class="layui-form" style="display: none">
        <div class="layui-form-item">
            <label class="layui-form-label">客户ID</label>
            <div class="layui-input-inline">
                <input type="number" name="customId" id="addCustomTableSelect" readonly
                       lay-verify="required" placeholder="请选择客户" autocomplete="off"
                       class="layui-input">
            </div>
            <label class="layui-form-label">客户名称</label>
            <div class="layui-input-inline">
                <input type="text" readonly name="addcustomName" id="addcustomName"
                       lay-verify="required" placeholder="显示客户名称，无需输入"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">回访内容</label>
            <div class="layui-input-block">
                <input type="text" name="visitContent" required  lay-verify="required" placeholder="请输入回访内容" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" name="remark" required  lay-verify="required" placeholder="请输入备注" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="visitAddFilter">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

    <!--回访更新表单-->
    <form id="visitUpdateForm" class="layui-form" lay-filter="visitUpdateFilter" style="display: none">
        <input type="hidden" name="visitId">
        <div class="layui-form-item">
            <label class="layui-form-label">客户ID</label>
            <div class="layui-input-inline">
                <input type="number" name="customId" readonly id="updateCustomTableSelect"
                       placeholder="" autocomplete="off"
                       class="layui-input">
            </div>
            <label class="layui-form-label">客户名称</label>
            <div class="layui-input-inline">
                <input type="text" readonly name="customName"
                        placeholder=""
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">回访内容</label>
            <div class="layui-input-block">
                <input type="text" name="visitContent" required  lay-verify="required" placeholder="请输入回访名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" name="remark" required  lay-verify="required" placeholder="请输入回访排序" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="visitUpdateFilter">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <script>
        //自定义layui组件的目录
        layui.config({
            base: '/layui/lay/modules/'
        }).extend({
            //设定组件别名
            tableSelect: 'tableSelect',
        });
        layui.use(['table','layer','jquery','form','upload','tableSelect'], function(){
            let table = layui.table;
            let layer = layui.layer;
            let $ = layui.jquery;
            let form = layui.form;
            let upload = layui.upload;
            let tableSelect = layui.tableSelect;

            //添加客户编号选择表格
            tableSelect.render({
                elem: '#addCustomTableSelect',	//定义输入框input对象 必填
                checkedKey: 'customId', //表格的唯一建值，非常重要，影响到选中状态 必填
                searchKey: 'contact',	//搜索输入框的name值 默认keyword
                searchPlaceholder: '联系人姓名搜索',	//搜索输入框的提示文字 默认关键词搜索
                table: {	//定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
                    url: '/custom/queryAll',
                    cols: [
                        [
                            {type: 'radio'}
                            , {field: 'customId', title: '客户ID', align: 'center', sort: true, width: 90}
                            , {field: 'contact', title: '联系人姓名', align: 'center', width: 120}
                            , {field: 'phone', title: '手机号', align: 'center', width: 140}
                        ]
                    ]
                },
                done: function (elem, data) {
                    //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
                    //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
                    elem.val(data.data[0].customId)
                    $("#addcustomName").val(data.data[0].contact)
                }
            })
            //执行实例
            var uploadInst = upload.render({
                elem: '#import' //绑定元素
                ,url: '/visit/importVisit' //上传接口
                ,auto:true // 选择文件后自动上传
                ,accept:"file"
                ,field:"file"
                ,done: function(res){
                    //上传完毕回调
                    if(res.code==0){
                        if(res.code==0){
                            alert("导入成功");
                        }
                    }
                }
                ,error: function(){
                    //请求异常回调
                }
            });

            //回访列表操作
            let visitTable =table.render({
                elem: '#visitTable'
                ,toolbar:'#toolbarHead'
                ,url: '/visit/queryAll' //数据接口
                ,page: true //开启分页
                ,cellMinWidth: 80
                ,cols: [
                    [//表头
                    {type:'checkbox',fixed:'left'}
                    ,{field: 'visitId', title: 'ID', sort: true, fixed: 'left'}
                    ,{field: 'visitContent', title: '回访内容'}
                    ,{field: 'customId', title: '顾客ID', sort: true}
                    ,{field: 'customName', title: '联系人'}
                    ,{field: 'createBy', title: '创建人'}
                    ,{field: 'createTime', title: '创建时间', sort: true}
                    ,{field: 'updateBy', title: '更新人', sort: true}
                    ,{field: 'updateTime', title: '更新时间', sort: true}
                    ,{field: 'remark', title: '备注', sort: true}
                    ,{fixed: 'right', title:'操作',align:'center',width: 120, toolbar: '#barRowEdit'}
                ]
                ]
            });

            //行编辑工具栏    监听工具条
            table.on('tool(visitFilter)', function(obj){
                let data = obj.data;
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        $.ajax({
                            url:"/visit/deleteById",
                            type:"DELETE",
                            data:{visitId:data.visitId},
                            dataType:"json",
                            success:function (resp) {
                                if(resp.code===0){
                                    visitTable.reload();
                                }
                            },
                            error:function () {
                                layer.msg("请求失败");
                            }
                        });
                    });
                } else if(obj.event === 'edit'){
                    // layer.alert('编辑行：<br>'+ JSON.stringify(data));
                    form.val("visitUpdateFilter", {
                        "customId": data.customId // "name": "value"
                        , "visitId": data.visitId
                        , "visitContent": data.visitContent
                        , "remark": data.remark
                        , "customName": data.customName
                    });
                    layer.open({
                        type: 1,
                        area: ['800px', '450px'],
                        content: $('#visitUpdateForm')
                    });
                }
            });

            //头部工具栏点击触发事件
            table.on('toolbar(visitFilter)', function(obj){
                let checkStatus = table.checkStatus(obj.config.id);
                let  checkData = checkStatus.data;
                switch(obj.event){
                    case 'add':
                        document.getElementById("visitAddForm").reset();
                        layer.open({
                            type: 1,
                            area: ['800px', '450px'],
                            content: $('#visitAddForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        });
                        break;
                    case 'delete':
                        if(checkData.length===0){
                            layer.msg('请至少选择一行数据');
                            return;
                        }
                        layer.confirm('真的删除行么', function(index) {
                        let visitIds = "";
                        for (let i = 0; i <checkData.length; i++) {
                            visitIds+=checkData[i].visitId+",";
                        }
                        visitIds = visitIds.substr(0, visitIds.length - 1);
                            $.ajax({
                                url:"/visit/deleteByIds",
                                type:"DELETE",
                                data:{visitIds:visitIds},
                                dataType:"json",
                                success:function (resp) {
                                    if(resp.code===0){
                                        visitTable.reload();
                                    }
                                },
                                error:function () {
                                    layer.msg("请求失败");
                                }
                            });
                        });
                        break;
                    case 'update':
                        // layer.msg('编辑');
                        if(checkData.length!==1){
                            layer.msg('编辑只能选中一行');
                            return;
                        }
                        form.val("visitUpdateFilter",checkData[0]);
                        layer.open({
                            type: 1,
                            area:['800px', '450px'],
                            content: $('#visitUpdateForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        });
                        break;
                }
            });

            //监听头部工具栏添加提交
            form.on('submit(visitAddFilter)', function(data){
                $.ajax({
                    url:"/visit/insert",
                    type:"POST",
                    data:data.field,
                    dataType:"json",
                    success:function (resp) {
                        if(resp.code===0){
                            layer.closeAll('page');
                            visitTable.reload();
                        }
                    },
                    error:function () {
                        layer.msg("请求失败");
                    }
                });
                return false;
            });

            //监听行工具栏添加更新
            form.on('submit(visitUpdateFilter)', function(data){
                $.ajax({
                    url:"/visit/update",
                    type:"PUT",
                    data:data.field,
                    dataType:"json",
                    success:function (resp) {
                        if(resp.code===0){
                            layer.closeAll('page');
                            visitTable.reload();
                        }
                    },
                    error:function () {
                        layer.msg("请求失败");
                    }
                });
                return false;
            });

        });
    </script>
</body>
</html>